<template>
	<view style="padding-bottom: 90upx;">
		<view style="background: #fff;margin-bottom: 15upx;">
			<swiper style="height: 420upx" indicator-active-color="red" indicator-dots="true" autoplay="true" interval="2000"
			 duration="500" circular="true" class="swiper" @change="swiperchange">
				<block v-for="(item,index) in bannerList" :key="index">
					<swiper-item>
						<block v-if="details.videoUrl">
							<image v-if="videoIocn" @tap="play" class="play" src="/static/video-play.png"></image>
						</block>
						<image :src="item.url" class="slide-image" style="width: 100%" mode="widthFix">
						</image>
					</swiper-item>
				</block>
			</swiper>
			<view class="top_desc flex-row flex-y-center">
      {{details.titleDesc}}
    </view>
		</view>

		<view class="details_box">
			<view class="houseInfo flex-row">
				<view class="flex-grow-1 ">
					<view class="tt">售价</view>
					<view class="data">{{details.totalPrice}}万</view>
				</view>
				<view class="flex-grow-1 huxing">
					<view class="tt">户型</view>
					<view class="data">{{details.jifang}}</view>
				</view>
				<view class="flex-grow-1">
					<view class="tt">面积</view>
					<view class="data">{{details.AreaStr}}㎡</view>
				</view>
			</view>
			<view class="base-info-content">
				<view style="margin-bottom: 20upx;" class="flex-row flex-y-center">
					<view class="title_b flex-grow-1">
						基本信息
					</view>
					<view style="color:#90969d;font-size: 24upx" class="flex-grow-1 flex-right flex-y-center">
						{{update_time}} 发布
					</view>
				</view>
				<view class="" style="overflow: hidden">
					<view class="base-info-li">单价：<text class="rightText">{{details.dan_price}}元/㎡</text></view>
					<view class="base-info-li">朝向：<text class="rightText">{{details.chaoxiang}}</text></view>
					<view class="base-info-li">楼层：<text class="rightText">{{details.louceng}}</text></view>
					<view class="base-info-li">装修：<text class="rightText">{{details.zhungxiu_type}}</text></view>
					<view class="base-info-li">类型：<text class="rightText">普通住宅</text></view>
					<view class="base-info-li">年代：<text class="rightText">{{details.niandai}}年</text></view>
					<view @tap="jumpToMap" class="base-info-li info-default flex-row">
						<view class="flex-grow-0">小区：<text style="color:#f56c6c">{{details.Community}}</text><text style="margin-left: 20upx">({{details.quxian}})</text>
						</view>
						<view class="flex-grow-1 flex-y-center flex-right">
							<image style="width: 16upx" mode="widthFix" src="/static/icon-jiantou-r.png"></image>
						</view>
					</view>
					<view @tap="tojisuanqi" class="base-info-li">房贷计算：<text style="color:#286cf7">》》》</text></view>

				</view>
				<view class="detail-tags list-style"></view>
			</view>
			<!--收藏-->
			<view @tap="collectionClick" class="collectionbox">
				<image v-if="is_no_collection" style="width: 40upx;height:40upx" mode="widthFix" src="/static/icon-favorite.png"></image>
				<image v-else style="width: 40upx;height:40upx;" mode="widthFix" src="/static/icon-favorite-active.png"></image>
			</view>
		</view>
		<!--  -->
		<view @tap="callTel" style="margin-bottom: 8rpx">
			<image style="width: 100%" mode="widthFix" src="https://www.linqinghu.cn/ruixiang/static/img/index/ad1.jpg"></image>
		</view>

		<view class="bottom_box flex-row">
			<view class="buyUserInfo flex-grow-0 flex-y-center">
				<view class="userBox flex-grow-0">
					<image style="width: 100%" mode="widthFix" class="userImg" src="https://www.linqinghu.cn/ruixiang/static/img/lin.jpg" />
				</view>
				<view class="flex-grow-1 userBox-right">
					<!--<p style="color:#1f232a;font-size: .28rem;">林经理</p>-->
					<!--<p style="color: #8c939a;font-size: .22rem" class="oneLine">瑞祥房产代理有限公司</p>-->
					<view style="color:#fff;font-size: 28rpx;">林经理</view>
					<view style="color: #fff;font-size: 22rpx" class="oneLine">孝感瑞祥房产代理有限公司</view>
				</view>
			</view>
			<!--<view @click="showWx=true" class="contact flex-grow-1 flex-y-center flex-x-center">微信</view>-->
			<view @tap="callTel" style="color: #fff" class="phone flex-grow-1 flex-y-center flex-x-center">
				<image mode="widthFix" style="width: 40rpx;margin-right: 10rpx" src="https://www.linqinghu.cn/ruixiang/static/img/phone.png" />咨询电话
			</view>
		</view>

		<!-- 视频model -->
		<view class="modal flex-row" v-if="showModelVideo" @tap="close">
			<view class="flex-y-center" style="width: 100%;">
				<video id="video" objectFit="cover" :src="videoUrl" controls :autoplay='true'></video>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		URI_GETHOUSEDETAILS,URI_ADDCOLLECTION,URI_CANCELCOLLECTION
	} from "../../utils/api";

	export default {
		name: "houseDetail",
		data() {
			return {
				details: {},
				bannerList: [],
				videoIocn: true,
				videoUrl: '',
				showModelVideo: false,
				is_no_collection: true,
				update_time: '',
				latAndLon: {}
			}
		},
		onLoad(option) {
			uni.setNavigationBarTitle({
				title: option.title,
				success: () => {
					console.log('setNavigationBarTitle success')
				},
				fail: (err) => {
					console.log('setNavigationBarTitle fail, err is', err)
				}
			});
			this.getHouseDetails(option.id);
			this.houseId = option.id;
		},
		onReady() {
			this.videContext = uni.createVideoContext('video')
		},
		methods: {
			getHouseDetails(id) {
				this.$ajax.get(URI_GETHOUSEDETAILS, {
					id: id
				}).then(res => {
					console.log(res.data);
					this.details = res.data.details;
					this.bannerList = res.data.banner;
					let update_time = this.details.update_time;
					let latAndLon = res.data.details.LatAndLon.split(',');
					let latAndLonInfo = {
						latitude: latAndLon[0] - 0,
						longitude: latAndLon[1] - 0,
						address: res.data.details.quxian,
						name: res.data.details.Community
					};
					this.update_time = update_time.toString().substring(0, 10);
					this.latAndLon = latAndLonInfo
				})
			},
			jumpToMap() {
				wx.openLocation(this.latAndLon)
			},
			tojisuanqi() {
				uni.navigateTo({
					url: `/pages/webView/webView?totalPrice=${this.details.totalPrice}`
				})
			},
			collectionClick() {
				console.log(122);
				if (this.is_no_collection) {
					this.$ajax.get(URI_ADDCOLLECTION, {
						lookHouseid: this.houseId
					}).then(res => {
						uni.showToast({
							title: "收藏成功！",
							success:()=>{
								this.is_no_collection=false
							}
						});
					})
				} else {
					this.$ajax.get(URI_CANCELCOLLECTION, {
						lookHouseid: this.houseId
					}).then(res => {
						wx.showToast({
							title: "取消收藏",
							success:()=>{
								this.is_no_collection = true;
							}
						});
					})
				}
			},
			callTel() {
				uni.makePhoneCall({
					phoneNumber: '18971966446', //仅为示例，并非真实的电话号码
					success() {
						console.log('ok')
					},
					fail(err) {
						console.log(err);
					}
				})
			},
			swiperchange(e) {
				if (e.detail.current == 0) {
					this.videoIocn = true;
				} else {
					this.videoIocn = false;
				}
			},
			play() {
				this.showModelVideo = true;
				this.videoUrl = this.details.videoUrl;
				this.videContext.play();
			},
			close(e) {
				if (e.target.id == 'video') {
					return true;
				}
				this.showModelVideo = false;
				this.videContext.pause();
			}
		}
	}
</script>

<style>
	page {
		padding-bottom: 90upx;
		/* background:#FFFFFF; */
	}

	.swiper {
		position: relative;
	}

	.slide-image {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.play {
		width: 100upx;
		height: 100upx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 10;
	}

	/* video model*/
	.modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 1);
		z-index: 9999;
	}

	.modal video {
		width: 100%;
		height: 430upx;
	}

	.top_desc {
		padding: 35upx 40upx 20upx 30upx;
		font-size: 36upx;
		color: #2d3236;
		font-weight: bold;
	}

	.details_box {
		background: #fff;
		margin-top:15upx;
		margin-bottom:15upx;
		position: relative;
	}

	.collectionbox {
		position: absolute;
		right:36upx;
		top:50%;
	}

	.houseInfo {
		text-align: center;
		padding:30upx 0;
		border-bottom: 1px solid #eee;
	}

	.huxing {
		border-left: 1px solid #eee;
		border-right: 1px solid #eee;
	}

	.tt {
		margin-bottom: 10upx;
		font-size: 28upx;
		color: #999;
	}

	.data {
		height: 32upx;
		line-height: 32upx;
		color: #fa3700;
		font-size: 32upx;
		font-weight: bold;
	}

	.base-info-content {
		padding: 24upx 36upx 38upx;
	}

	.title_b {
		font-size: 30upx;
		color: #3d4147;
		font-weight: bold;
	}

	.base-info-li {
		float: left;
		width: 50%;
		height: 26px;
		line-height: 26px;
		font-size: 28upx;
		color: #999;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.base-info-li.info-default {
		width: 100%;
	}

	.base-info-li .rightText {
		color: #1a1f26;
	}



	.description {
		padding: 24upx 36upx 38upx;
		color: #999;
		font-size: 28upx;
		background: #fff;
	}

	.bottom_box {
		width: 100%;
		height: 90upx;
		position: fixed;
		background: #fff;
		bottom: 0;
		left: 0;
		font-size: 30upx;
		color: #fff;
		z-index: 10;
	}

	.buyUserInfo {
		width: 364upx;
		padding-left: 27upx;
		background: linear-gradient(left, #fe9500, #ff7801);
		background: -webkit-gradient(linear, left top, right top, from(#fe9500), to(#ff7801));
		height: 100%;
	}

	.userBox {
		width: 64upx;
		height: 64upx;
		border-radius: 50%;
		overflow: hidden;
	}

	.userBox-right {
		margin-left: 10upx;
	}

	.contact {
		background: linear-gradient(left, #fe9500, #ff7801);
		background: -webkit-gradient(linear, left top, right top, from(#fe9500), to(#ff7801));
		height: 100%;
	}

	.phone {
		height: 100%;
		background: linear-gradient(left, #3cdc50, #3cba50);
		background: -webkit-gradient(linear, left top, right top, from(#3cdc50), to(#3cba50));
	}

	.phone:active {
		opacity: .8;
	}
</style>
